<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>预算管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="/gradesign/css/bootstrap.min.css"/>
	<link href="/gradesign/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen"/>
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" type="text/css" href="/gradesign/css/bootstrap-table.min.css"/>
    <style type="text/css">
    	html{width:98.5%}
		body{
        	background:transparent;
        	margin-left:20px;
        	width:98% !important;
   			 }
   		.row{margin-top: 20px;}
   		.echartCell{border:solid 1px #e7e7e7}
    </style>
</head>
<body>
	<div class="content table-content">
	<form class="form-horizontal" >
		<div class="row">
			<div class='col-md-2'>
				<div class="form-group">
					<label for="yearMonth" class="control-label col-sm-5">年月：</label>
					<div class="col-sm-7">
						<input type="text" id="yearMonth" class="form-control "></input>
					</div>
				</div>
			</div>
			<div class='col-md-4'>
				<div class="form-group">
					<label for="member" class="control-label col-sm-4">成员：</label>
					<div class="col-sm-4">
						<select class="form-control col-xs-12" id="member" >
				          	<option th:each="memberName : ${nameList}" th:text="${memberName.membername}"></option>
				       	</select>
					</div>
				</div>
			</div>
			<div class='col-md-2'>
				<div class="form-group">
					<button type="button" class="btn btn-primary" onclick="query()">查询</button>
				</div>
			</div>
		</div>
		<div class="row echart-body">
				<div class="col-sm-6">
					<div id="incomePie"  style="height:240px" class="echartCell"></div>
					<div id="payPie"  style="height:240px" class="echartCell"></div>
					
				</div>
				<div class="col-sm-6">
					<div id="debtPie"  style="height:240px" class="echartCell"></div>
					<div id="totalBar"  style="height:240px" class="echartCell"></div>
				</div>	
		</div>
	</form>
	</div>
</body>
<script type="text/javascript" src="/gradesign/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/gradesign/js/echarts.min.js"></script>
<script type="text/javascript" src="/gradesign/js/infographic.js"></script>
<script type="text/javascript" src="/gradesign/js/macarons.js"></script>
<script type="text/javascript" src="/gradesign/js/westeros.js"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="/gradesign/js/console/CateBill.js"></script>
</html>